<template>
  <div class="orders-view">
    <h1>订单管理</h1>
    
    <div class="stats-chart">
      <h3>订单状态统计</h3>
      <div class="chart">
        <div 
          v-for="(value, index) in statsData.values" 
          :key="index"
          class="chart-bar"
          :style="{ height: `${value * 30}px` }"
          :title="`${statsData.labels[index]}: ${value}`"
        >
          <span class="chart-label">{{ statsData.labels[index] }}</span>
        </div>
      </div>
    </div>
    
    <div class="order-list">
      <div v-for="order in orders" :key="order.id" class="order-item">
        <h3>订单 #{{ order.id }}</h3>
        <p>客户: {{ order.customer }}</p>
        <p>菜品: {{ order.dishes.join(', ') }}</p>
        <p>总价: {{ order.total }}元</p>
        <p>状态: 
          <select 
            :value="order.status" 
            @change="updateOrderStatus(order.id, $event.target.value)"
            class="status-select"
          >
            <option value="待处理">待处理</option>
            <option value="进行中">进行中</option>
            <option value="已完成">已完成</option>
          </select>
        </p>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, computed, onMounted, watch } from 'vue'

const orders = ref([
  { id: 1, customer: '张三', dishes: ['健康沙拉', '鸡胸肉套餐'], total: 60, status: '已完成' },
  { id: 2, customer: '李四', dishes: ['素食便当'], total: 30, status: '进行中' },
  { id: 3, customer: '王五', dishes: ['健康沙拉', '素食便当'], total: 55, status: '待处理' }
])

// 加载本地存储的数据
onMounted(() => {
  const savedOrders = localStorage.getItem('orders')
  if (savedOrders) {
    orders.value = JSON.parse(savedOrders)
  }
})

// 保存数据到本地存储
watch(orders, (newOrders) => {
  localStorage.setItem('orders', JSON.stringify(newOrders))
}, { deep: true })

const statsData = computed(() => {
  return {
    labels: ['已完成', '进行中', '待处理'],
    values: [
      orders.value.filter(o => o.status === '已完成').length,
      orders.value.filter(o => o.status === '进行中').length,
      orders.value.filter(o => o.status === '待处理').length
    ]
  }
})

const updateOrderStatus = (orderId, newStatus) => {
  const order = orders.value.find(o => o.id === orderId)
  if (order) {
    order.status = newStatus
  }
}
</script>

<style scoped>
.orders-view {
  padding: 20px;
}

.stats-chart {
  margin-bottom: 30px;
  background-color: white;
  padding: 15px;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.chart {
  display: flex;
  height: 150px;
  align-items: flex-end;
  gap: 20px;
  padding-top: 20px;
}

.chart-bar {
  flex: 1;
  background-color: #007bff;
  position: relative;
  min-width: 40px;
  border-radius: 4px 4px 0 0;
  transition: height 0.3s ease;
}

.chart-label {
  position: absolute;
  bottom: -25px;
  left: 0;
  right: 0;
  text-align: center;
  font-size: 12px;
}

.order-list {
  display: grid;
  gap: 15px;
}

.order-item {
  background-color: white;
  padding: 15px;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.status-select {
  padding: 5px;
  border-radius: 4px;
  border: 1px solid #ddd;
}

@media (max-width: 768px) {
  .chart {
    gap: 10px;
  }
  
  .chart-bar {
    min-width: 30px;
  }
}
</style>